<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="keywords" content="Piece,统一登录平台">
    <meta name="description" content="Piece统一登录平台">
    <title>Piece | Grant</title>
    <link th:href="@{/lib/bootstrap/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/lib/bootstrap-validator/bootstrapValidator.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/lib/font-awesome/css/font-awesome.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/lib/iCheck/skins/all.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/animate.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/login.min.css}" rel="stylesheet" type="text/css"/>

    <!-- Icons -->
    <link rel="apple-touch-icon" type="text/html" sizes="76x76" th:href="@{/image/apple-icon.png}">
    <link rel="shortcut icon" type="text/html" sizes="96x96" th:href="@{/image/favicon.png}">

    <script type="text/javascript">
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>
</head>

<body class="signin">
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-7">
            <div class="signin-info">
                <div class="logopanel m-b">
                    <h1>[[#{view.title}]] [[#{view.grant}]]</h1>
                </div>
                <div class="m-b"></div>
                <h3></h3>
                <ul class="m-b">
                    <li th:text="${client_id} + ' 请求授权，该应用将获取你的以下信息'"></li>
                    <li><p>昵称，头像和性别</p></li>
                    <li>授权后表明你已同意 <a href="#" style="color: #E9686B">服务协议</a></li>
                </ul>
            </div>
        </div>

        <div class="col-sm-5">
            <form id="grantForm">
                <p class="m-t-md text-center"></p>
                <div class="row">
                    <div class="col-xs-12 pull_left">
                        <div class="form-group">
                            <input type="text" name="uname" class="form-control uname" th:placeholder="#{view.login_name}" autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 pull_left">
                        <div class="form-group">
                            <input type="password" name="pword" class="form-control pword" th:placeholder="#{view.login_password}" autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="row" th:if="${needValidate == true}">
                    <div class="col-xs-6 pull_left">
                        <div class="form-group">
                            <input class="form-control m-b" type="text" name="captcha" id="verify" th:placeholder="#{view.captcha}">
                        </div>
                    </div>
                    <div class="col-xs-6 pull_left">
                        <a href="javascript:void(0);" rel="external nofollow" th:title="#{view.refresh}">
                            <img class="code" src="" id="verifyImg"/>
                        </a>
                    </div>
                </div>
                <a id="grantBtn" class="btn btn-login btn-block" th:utext="#{view.grant}">授权</a>
            </form>
        </div>
    </div>

    <div class="signup-footer">
        <div class="pull-left">©
            <span th:utext="#{view.copyright}"></span>&nbsp;
            <span th:utext="#{view.title}"></span>&nbsp;
            <span>All Rights Reserved</span>
        </div>
    </div>

</div>

<script th:inline="javascript"> var ctx = [[${ctx}]];</script>
<!-- 全局js -->
<script th:src="@{/lib/jquery/jquery.min.js?v=2.1.4}" type="text/javascript"></script>
<script th:src="@{/lib/bootstrap/bootstrap.min.js?v=3.3.5}" type="text/javascript"></script>
<!-- Bootstrap Validation -->
<script th:src="@{/lib/bootstrap-validator/bootstrapValidator.min.js}" type="text/javascript"></script>
<!-- layer -->
<script th:src="@{/lib/layer/layer.js}" type="text/javascript"></script>
<!-- crybto -->
<script th:src="@{/lib/crypto/aes.min.js}" type="text/javascript"></script>
<script th:src="@{/lib/crypto/mode-ecb.min.js}" type="text/javascript"></script>
<!-- login -->
<script th:src="@{/js/login.min.js?v=1.0.0}" type="text/javascript"></script>

<script th:inline="javascript">
    var login_bootstrapValidator;
    var needValidate = [[${needValidate}]];
    var authorization = [[${authorization}]];
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#grantForm #grantBtn').on('click', function () {
            $('#grantForm').submit();
        });

        $('#grantForm').submit(function() {
            login();
            return false;
        });

        if (needValidate) {
            $('#grantForm #verifyImg').on('click', changeVerifyImg);
            $('#verifyImg').click();
        }

        validateRule();
        $('body').keydown(keyDownLogon);
    });

    function changeVerifyImg() {
        var url = ctx + 'authentication/code/captcha?captcha_type=char&validate_code_session=' + generateSessionKey();
        $('#grantForm #verifyImg').attr('src', url);
        $("#grantForm input[name='validate_code_session']").val(SSESSION_KEY);
    }

    function keyDownLogon(e) {
        if (event.keyCode == '13') {
            event.preventDefault();
            $('#grantBtn').trigger('click');
        }
    }

    // 登陆提交
    function login() {
        var bootstrapValidator = $('#grantForm').data('bootstrapValidator');
        bootstrapValidator.validate();
        if (!bootstrapValidator.isValid()) return false;

        var uname = $("#grantForm input[name='uname']").val();
        var pword = $("#grantForm input[name='pword']").val();
        uname = uname.replace(/\%/g,'');
        pword = pword.replace(/\%/g,'');
        uname = uname.replace(/\</g,'');
        pword = pword.replace(/\</g,'');
        uname = uname.replace(/\>/g,'');
        pword = pword.replace(/\>/g,'');
        var authenticationInfo = Encrypt(uname + ',' + pword);

        var verify = '';
        if (needValidate) {
            verify = $("#grantForm input[name='captcha']").val();
        }

        $.ajax({
            url: ctx + 'authentication/doLogin',
            type: 'post',
            dataType: 'json',
            data: {
                'authenticationInfo': authenticationInfo,
                'captcha' : verify,
                'grant_type' : 'username_code',
                'validate_code_session' : SSESSION_KEY
            },
            beforeSend: function() {
                $('#grantBtn').attr('disabled','disabled');
            },
            headers: {
                'Authorization': authorization
            },
            success: function(r) {
                $('#grantBtn').removeAttr('disabled');

                if (r.code == 200) {
                    layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });

                    window.location.href = r.param;
                } else {
                    layer.msg(r.msg);
                    $('#grantForm #verifyImg').click();
                    $("#grantForm input[name='captcha']").val('');
                }
            },
            error: function(r) {
                layer.msg(r.msg);
                $('#grantBtn').removeAttr('disabled');
                $('#grantForm #verifyImg').click();
                $("#grantForm input[name='captcha']").val('');
            }
        });
    }

    function validateRule(option) {
        if (!option) {
            if (needValidate) {
                option = {
                    message: '[[#{view.not_empty}]]',
                    fields: {
                        uname: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-username}]]'
                                }
                            }
                        },
                        pword: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-password}]]'
                                }
                            }
                        },
                        verify: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-validatecode}]]'
                                }
                            }
                        }
                    }
                };
            } else {
                option = {
                    message: '[[#{view.not_empty}]]',
                    fields: {
                        uname: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-username}]]'
                                }
                            }
                        },
                        pword: {
                            validators: {
                                notEmpty: {
                                    message: '[[#{view.entry-password}]]'
                                }
                            }
                        }
                    }
                };
            }
        }

        login_bootstrapValidator = $('#grantForm').bootstrapValidator(option);
    }
</script>
</body>
</html>
